<template>
  <el-card class="box-card-top">
    <!-- 三级分类全局组件 -->
    <CategorySelect :scene="scene" />
  </el-card>
  <el-card class="box-card-content">
    <div v-if="scene == 0">
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="!categoryStore.c3Id"
        @click="addAttr"
      >
        添加属性
      </el-button>
      <el-table style="width: 100%; margin-top: 10px" border :data="attrArr">
        <el-table-column
          type="index"
          label="序号"
          prop=""
          align="center"
          width="80px"
        />
        <el-table-column
          label="属性名称"
          prop="attrName"
          width="150px"
          align="center"
        />
        <el-table-column
          label="属性值名称"
          prop=""
          width="width"
          align="center"
        >
          <template #="{ row, $index }">
            <div>
              <el-tag
                v-for="(attrValue, index) in row.attrValueList"
                :key="attrValue.id"
                style="margin: 2px 10px"
              >
                {{ attrValue.valueName }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" width="150px" align="center">
          <template #="{ row, $index }">
            <div>
              <el-button
                type="warning"
                icon="Edit"
                size="small"
                @click="updateAttr(row)"
              />
              <el-popconfirm
                width="200px"
                :title="`确认删除${row.attrName}吗？`"
                @confirm="deleteAttr(row.id)"
              >
                <template #reference>
                  <el-button type="danger" icon="Delete" size="small" />
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="scene == 1">
      <!-- 展示添加属性与修改属性的接口 -->
      <el-form :inline="true" label-width="80px">
        <el-form-item label="属性名称">
          <el-input
            placeholder="请输入属性名称"
            v-model="attrParams.attrName"
          />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        size="deault"
        icon="Plus"
        :disabled="attrParams.attrName ? false : true"
        @click="addAttrValue"
      >
        添加属性值
      </el-button>
      <el-button type="default" size="default" @click="cancel">取消</el-button>

      <el-table
        style="width: 100%; margin: 20px 0px"
        border
        :data="attrParams.attrValueList"
      >
        <el-table-column
          type="index"
          label="序号"
          prop=""
          align="center"
          width="80px"
        />
        <el-table-column label="属性值名称" prop="attrName" align="center">
          <!-- row:即为当前属性值对象 -->
          <template #="{ row, $index }">
            <el-input
              v-if="row.flag"
              v-model="row.valueName"
              size="small"
              placeholder="请输入属性值名称"
              @blur="toLook(row, $index)"
              :ref="(vc: any) => inputArr[$index] = vc"
            ></el-input>
            <div v-else @click="toEdit(row, $index)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="属性值名称" prop="" width="width" align="center">
          <template #="{ row, $index }">
            <div>
              <el-tag v-for="(attrValue, index) in row.attrValueList" :key="attrValue.id" style="margin:2px 10px">{{
                attrValue.valueName }}</el-tag>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="属性操作" prop="" align="center">
          <template #="{ row, $index }">
            <el-button
              type="danger"
              icon="Delete"
              size="small"
              @click="deleteAttrValue($index)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        size="deault"
        @click="save"
        :disabled="attrParams.attrValueList.length > 0 ? false : true"
      >
        保存
      </el-button>
      <el-button type="default" size="default" @click="cancel">取消</el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import type { AttrResponseData, Attr, AttrValue } from '@/api/product/attr/type'
// 引入获取已有属性与属性值接口
import { reqAttr, reqAddOrUpdateAttr, reqRemoveAttr } from '@/api/product/attr'
import useCategoryStore from '@/store/modules/category'

const categoryStore = useCategoryStore()

// const list1 = ref([])
// const list2 = ref([])
// const list3 = ref([])
// const categoryForm = reactive({
//   category1Id: '',
//   category2Id: '',
//   category3Id: '',
// })

const attrArr = ref<Attr[]>([])

// 定义卡片组件内容 切换的变量  scene=0,显示table，scene=1，显示添加与修改属性的结构
const scene = ref<number>(0)

// // 定义响应式的数据去控制编辑模式与查看模式的切换
// const flag = ref<boolean>(true)

// 收集新增的属性的数据
const attrParams = reactive<Attr>({
  attrName: '', // 新增的属性名字
  attrValueList: [], // 新增的属性值数组
  categoryId: '', // 三级分类的 ID
  categoryLevel: 3, // 代表的是三级分类
})

// 准备一个数组：将来存储对应的的组件实例 el-input
const inputArr = ref<any>([])

const addAttr = () => {
  // 每一次点击进去时候，先清空一下数据再收集   ,同时收集一下三级分类的id
  Object.assign(attrParams, {
    attrName: '', // 新增的属性名字
    attrValueList: [], // 新增的属性值数组
    categoryId: categoryStore.c3Id, // 三级分类的 ID
    categoryLevel: 3, // 代表的是三级分类
  })

  scene.value = 1
  // // 点击这个按钮的时候，收集新增属性的三级分类的ID
  // attrParams.categoryId = categoryStore.c3Id
}

// 修改按钮
const updateAttr = (row: Attr) => {
  //
  scene.value = 1
  // 将已有的属性值 对象赋值给attrParams 对象即可
  // 深拷贝的 JSON 方法 解决 80%, 一般最好装依赖 cloneDeep
  Object.assign(attrParams, JSON.parse(JSON.stringify(row)))
}

// 删除某一个已有的属性方法的回调
const deleteAttr = async (attrId: number) => {
  console.log(123)
  const res: any = await reqRemoveAttr(attrId)
  if (res.code == 200) {
    ElMessage.success('删除成功！')
    // 刷新页面
    getAttr()
  } else {
    ElMessage.error('删除失败')
  }
}

// 场景scene = 1中取消按钮的回调
const cancel = () => {
  scene.value = 0
}

// 场景scene = 1中保存按钮的回调
const save = async () => {
  // 发请求
  const res = await reqAddOrUpdateAttr(attrParams)
  console.log('klkl', res)
  // 添加属性 | 修改已有的属性已经成功
  if (res.code == 200) {
    // 切换场景
    scene.value = 0
    //提示信息
    ElMessage.success(attrParams.id ? '修改成功' : '添加成功')
    // 获取全部已有的属性与属性值
    getAttr()
  } else {
    ElMessage.error(attrParams.id ? '修改失败' : '添加失败')
  }
}

// 添加属性值按钮的回调
const addAttrValue = () => {
  // alert(12)
  // 点击添加属性值按钮的时候，向数组中添加一个属性值对象
  attrParams.attrValueList.push({
    valueName: '',
    // 设置属性用于判断每个input 的查看与编辑状态
    flag: true,
  })
  // 获取最后的 el-input 组件聚焦
  nextTick(() => {
    // 数组中的最后一项，即为数组长度 -1
    inputArr.value[attrParams.attrValueList.length - 1].focus()
  })
}

// 属性值表单元素失去焦点之后， input变为span
const toLook = (row: AttrValue, $index: number) => {
  // 非法情况1的判断。 输入框不能为空
  if (row.valueName.trim() == '') {
    // 删除对应属性值为空的元素
    attrParams.attrValueList.splice($index, 1)
    // 弹出提示消息
    ElMessage.error('属性值名称不能为空')
    return
  }
  // 非法情况2 的判断，不能重复输入相同的属性值名称valueName
  const isRepat = attrParams.attrValueList.find((item: any) => {
    // 需要将row从数组里面判断的时候去除 剔除自己再进行判断，否则自己与自己判断永远都是重复的
    // row是最新新增的属性值【数组的最后一项元素】
    // 判断的时候，需要把已有的数组当中新增的这个属性值去除后再判断
    if (item !== row) {
      return item.valueName === row.valueName
    }
  })
  // console.log('是否重复', isRepat)
  if (isRepat) {
    // 删除数组中重复的属性值元素
    attrParams.attrValueList.splice($index, 1)
    ElMessage.error('属性值名称不能重复！')
    return
  }
  row.flag = false
}

// 点击span框变为编辑模式  span变为input
const toEdit = (row: AttrValue, $index: number) => {
  row.flag = true
  // nextTick: 响应式数据发生变化，获取更新DOM （组件实例）
  nextTick(() => {
    inputArr.value[$index].focus()
  })
}

// 添加属性值名称的删除按钮 deleteAttrValue
const deleteAttrValue = ($index: number) => {
  // 当前这个删除属性在的操作是不需要发请求的
  attrParams.attrValueList.splice($index, 1)
}

// 获取已有的属性与属性值的方法
const getAttr = async () => {
  // 获取分类的id
  const { c1Id, c2Id, c3Id } = categoryStore
  // console.log('111', c1Id, c2Id, c3Id)
  const res: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)
  console.log('属性', res)
  if (res.code == 200) {
    attrArr.value = res.data
  }
}

// // 自动聚焦的方法  --写在el-input里面
// const handler = (element: any) => {
//   console.log(element)
//   // element.facous
// }

// 监听仓库三级分类的 id
watch(
  () => categoryStore.c3Id,
  () => {
    // 清空上一次查询的属性与属性值
    attrArr.value = []
    // 要保证三级分类id 有才发请求
    if (!categoryStore.c3Id) return
    // 调用属性的方法
    getAttr()
  },
)

// 路由组件切换页面之后，仓库中存储的数据也要进行销毁
onBeforeUnmount(() => {
  console.log('categoryStore', categoryStore)
  // 清空分类仓库中的数据
  categoryStore.$reset()
})
</script>
<style scoped lang="scss">
.box-card-content {
  margin-top: 20px;
}
</style>
